<template>
  <div class="my-bread flex-between">
    <div class="bread-left flex">
      <div class="title" v-if="showRoute">
        {{ showRoute.meta.title }}
      </div>
      <div class="title flex" v-else>
        <img
          v-if="props.showBack"
          @click="goBack"
          src="@/assets/images/common/back-btn.png"
          class="back-img hover"
        />
        <slot name="bread-name"></slot>
      </div>
      <div class="more-info">
        <slot name="more-info"></slot>
      </div>
      <div class="more-content-right">
        <slot name="more-content-right"></slot>
      </div>
    </div>
    <div class="bread-right">
      <slot name="bread-right"></slot>
    </div>
  </div>
</template>

<script setup>
import { computed, useAttrs } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth-store'
import router from '@/router'
const props = defineProps({
  showBack: {
    type: Boolean,
    default: true
  }
})
const attrs = useAttrs()
const route = useRoute()
const showRoute = computed(() => {
  const showTitle = ['assignment']
  return showTitle.indexOf(route.name) !== -1 ? route : null
})

const authStore = useAuthStore()

/* eslint-enable */
// const jumpSchoolManage = async () => {
//   await authStore.getUserInfoFun()
//   const { school_id, school_name } = authStore.userInfo
//   window.open(
//     `${schoolManage}/?school_id=${school_id}&school_name=${school_name}`
//   )
// }
/* eslint-enable */
// const logout = async () => {
//   const { sessionId, userId, userType, platform } = authStore.userInfo
//   const params = {
//     ACCESSTOKEN: sessionId,
//     userId,
//     userType,
//     platform
//   }
//   const res = await postLogout(params)
//   if (res.F_responseNo === 10000) {
//     ElMessage.success('退出成功')
//     authStore.setUserInfo({
//       sessionId: '',
//       sessionName: '',
//       userId: '',
//       userName: '',
//       platform: '',
//       userType: '',
//       school_id: '',
//       classroomTree: []
//     })
//     router.push('/login')
//   } else {
//     ElMessage.error(res.F_responseMsg)
//   }
// }

const goBack = () => {
  const { onBack } = attrs
  if (onBack) {
    onBack()
    return
  }
  router.back()
}
</script>

<style lang="less" scoped>
.my-bread {
  .bread-left {
    width: 70%;
    .title {
      gap: 20px;
      font-weight: bold;
      font-size: 20px;
      margin-right: 20px;
    }
    .back-img {
      width: 52px;
    }

    .bread-text {
      color: var(--el-text-color-placeholder);
      font-size: 16px;
    }

    .last-bread-text {
      font-size: 22px;
      font-weight: bold;
    }
    .more-content-right {
      margin-left: auto;
    }
  }
}
</style>
